<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: 'home' }">过程任务</el-breadcrumb-item>
            <el-breadcrumb-item>任务详情</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 任务详情 -->
        <div>
            <h2 style="border-bottom: 1px solid;padding-bottom: 10px;">任务详情</h2>

            <div style="margin: 3% 5% 3% 5%;">
                <!-- 选题详情 -->
                <div>
                    <el-descriptions title="选题详情" column="2" size="large">
                        <el-descriptions-item label="任务名称" width="200px">{{ taskDetial.processName }}</el-descriptions-item>
                        <el-descriptions-item label="专业">{{ taskDetial.classMajorName }}</el-descriptions-item>
                        <el-descriptions-item label="开始时间">{{ taskDetial.startDate }}</el-descriptions-item>
                        <el-descriptions-item label="截止时间">{{ taskDetial.endDate }}</el-descriptions-item>
                    </el-descriptions>
                </div>

                <h1>班级详情</h1>
                <div style="margin-top:2%;"><!-- 收到的小队邀请 -->
                    <el-table :data="getStuStatus" height="205" border stripe style="width: 100%; height:200px;">
                        <el-table-column prop="stuName" label="学生姓名" />
                        <el-table-column prop="stuId" label="学号" />
                        <el-table-column prop="className" label="班级" />
                        <el-table-column prop="createTime" label="提交时间" :formatter="formatDate" />
                        <el-table-column fixed="right" label="报告" width="120">
                            <template #default="scope">
                                <el-button link type="primary" size="small"
                                    @click="doewnFile(scope.row.stuPhone, scope.row.processId, scope.row.filename)"
                                    v-if="scope.row.filename != null">下载</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-button @click="$router.push('innerProTask')" style="margin-top: 3%; float: right;">返回</el-button>
                </div>
            </div>
        </div>



    </div>
</template>
<script setup>
import { ref, onBeforeMount, computed } from 'vue';
import { ArrowRight } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import requests from '@/api/ajax';

const route = useRoute();
const processId = route.query.processId

onBeforeMount(() => {
    const asd = requests({ url: "/inner/processTask/" + processId, method: "get", }).then(res => {
        //存储用户信息到浏览器toke
        if (res.code === 20041) {
            getStuStatus.value = res.rdata
        } else {
            getStuStatus.value = null
        }


    })
        .catch(err => {
            console.error(err);
            // 登录请求失败后的操作
        });
})

const getStuStatus = ref([
    {
        processId: '',
        processName: "",
        processType: '',
        startDate: "",
        endDate: "",
        content: "",
        scoreStart: "",
        scoreEnd: "",
        practicalId: '',
        classId: '',
        className: "",
        adviserId: '',
        adviserName: "",
        teachId: '',
        teachName: '',
        practicalType: '',
        onloadDate: '',
        planId: '',
        courseId: '',
        courseName: '',
        majorName: '',
        enrolDate: '',
        filename: "",
        stuId: '',
        stuName: "",
        stuSex: '',
        stuIdentity: '',
        stuCollege: '',
        stuPhone: "",
        classMajorName: "",
        classGraduateDate: ''
    }
])




const taskDetial = ref({
    processName: '',
    majorName: '',
    startDate: '',
    endDate: '',
})

taskDetial.value.processName = computed(() => getStuStatus.value[0].processName)
taskDetial.value.classMajorName = computed(() => getStuStatus.value[0].classMajorName)

const startStr = computed(() => getStuStatus.value[0].startDate);
taskDetial.value.startDate = computed(() => startStr.value.substring(0, 10));

const endStr = computed(() => getStuStatus.value[0].endDate);
taskDetial.value.endDate = computed(() => endStr.value.substring(0, 10));

//时间格式化
function formatDate(row, column, cellValue, index) {
    let format = 'YYYY-mm-dd'
    let date = new Date(cellValue);
    if (cellValue != null) {
        const dataItem = {
            'Y+': date.getFullYear().toString(),
            'm+': (date.getMonth() + 1).toString(),
            'd+': date.getDate().toString(),
        }
        Object.keys(dataItem).forEach((item) => {
            const ret = new RegExp(`(${item})`).exec(format);
            if (ret) {
                format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
            }
        });
        return format
    } else {
        const nothing = ('未提交')
        return nothing
    }

}

function doewnFile(appraiseePhone, processId, filename) {
    if (filename != null) {
        const getReport = requests({ url: "/preview/processTask/" + appraiseePhone + "/" + processId, method: "get", responseType: 'blob', }).then(res => {
            // const blob = new Blob([res.rdata], { type: res.rdata.type });
            // saveAs(blob, 'example.docx');

            // 将响应数据转换为 Blob 对象
            const blob = new Blob([res.data]);
            // 创建链接进行下载
            const link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        })
            .catch(err => {
                console.error(err);
                // 登录请求失败后的操作
            });
    } else {
        alert('该学生未提交报告')
    }
}

</script>